import React, { Component } from 'react';
import Lightbox from 'react-image-lightbox';
import {QiniuImgUrl} from "../common/url";
import moment from 'moment';

export class SingleInfo extends Component{
    
    render(){
        return (
            <div className="form-group">
                <label className="col-sm-4 control-label">
                    {this.props.label}
                </label>
                <div className="col-sm-8">
                    <span style={{padding:"6px 12px",display:"block"}}>{this.props.info==null||this.props.info==""?"暂无信息":this.props.info}</span>
                </div>
            </div>
        )
    }
}

export class TitleforOU extends Component{
    render(){
        return (
            <div className="form-group">
                <div className="col-sm-offset-1 col-sm-8 control-title" style={{textAlign:"left"}}>
                    <label className="control-label">
                        {this.props.label}
                    </label>
                </div>
            </div>
        )
    }
}

export class DateInfo extends Component{
    
    render(){
        return (
            <div className="form-group">
                <label className="col-sm-4 control-label">
                    {this.props.label}
                </label>
                <div className="col-sm-8">
                    <span style={{padding:"6px 12px",display:"block"}}>{this.props.info==null||this.props.info==""?"暂无信息":moment(this.props.info).format("YYYY-MM-DD HH:mm")}</span>
                </div>
            </div>
        )
    }
}

export class InfoTitle extends Component{
    
    render(){
        return (
            <div className="form-group">
                <div className="control-title">
                    <label className="col-sm-4 control-label">
                        {this.props.title}
                    </label>
                </div>
            </div>
        )
    }
}

export class InfoTitleforUpdate extends Component{
    
    render(){
        return (
            <div className="form-group">
                <div className="control-title">
                    <label className="col-sm-2 control-label">
                    {this.props.title}
                    </label>
                </div>
            </div>
        )
    }
}

export class InfoImage extends Component{

	constructor () {
		super();
		this.state = {
            isOpen: false
		};
	}

    render(){
        const {isOpen} = this.state;

        return (
            <div className="form-group">
                <label className="col-sm-2 control-label">
                {this.props.name}
                </label>
                <div className="col-sm-10">
                <img src={this.props.src} alt={this.props.name} style={{width:"30%",height:"auto"}}  onClick={() => this.setState({ isOpen: true })}/>
                    {isOpen &&
                        <Lightbox
                            mainSrc={this.props.src}
                            onCloseRequest={() => this.setState({ isOpen: false })}
                        />
                    } 
                </div>
            </div>
        )
    }

}

export class InfoImage3 extends Component{

	constructor () {
		super();
		this.state = {
            isOpen: false
		};
	}

    render(){
        const {isOpen} = this.state;

        return (
            <div className="form-group">
                <label className="col-sm-4 control-label">
                {this.props.name}
                </label>
                <div className="col-sm-8">
                <img src={QiniuImgUrl+(this.props.src==null||this.props.src==""?"009575c2-5200-4316-a8bb-a80ef3917ef4.jpg":this.props.src)} alt={this.props.name} style={{width:"30%",height:"auto"}}  onClick={() => this.setState({ isOpen: true })}/>
                    {isOpen &&
                        <Lightbox
                            mainSrc={QiniuImgUrl+(this.props.src==null?"009575c2-5200-4316-a8bb-a80ef3917ef4.jpg":this.props.src)}
                            onCloseRequest={() => this.setState({ isOpen: false })}
                        />
                    } 
                </div>
            </div>
        )
    }

}

export class InfoImage2 extends Component{

	constructor () {
		super();
		this.state = {
            isOpen: false,
            index: 0
		};
	}

    render(){
        //console.log(this.props.name +": " +this.props.src);
        const {isOpen,index} = this.state;
        const images = this.props.src==null || this.props.src=="" ?["009575c2-5200-4316-a8bb-a80ef3917ef4.jpg"]:this.props.src;
        let allImages = [];
        if(this.props.src==null || this.props.src==""){
            allImages.push(
            <img key="0" src={QiniuImgUrl+"009575c2-5200-4316-a8bb-a80ef3917ef4.jpg"} alt={this.props.name} style={{display:"block",width:"30%",height:"auto"}}  onClick={() => this.setState({ isOpen: true })}/>
            )
        }else{
            let excha = [];
            if((typeof images)=="string"){
                excha = images.split(",")
            }else{
                excha = images
            }
            if(excha == null){
                excha = [];
            }
            for(let i=0;i<excha.length;i++){
                let item = excha[i];
                allImages.push(
                    <img key={i} src={QiniuImgUrl+item} alt={this.props.name} style={{display:"block",width:"30%",height:"auto"}}  onClick={() => this.setState({ isOpen: true })}/>
                )
            }
        }
        return (
            <div className="form-group">
                <label className="col-sm-4 control-label">
                {this.props.name}
                </label>
                <div className="col-sm-8">
                    {allImages}
                {/*<img src={QiniuImgUrl+images[index]} alt={this.props.name} style={{width:"30%",height:"auto"}}  onClick={() => this.setState({ isOpen: true })}/>*/}
                    {isOpen &&
                        <Lightbox
                            mainSrc={QiniuImgUrl+images[index]}
                            nextSrc={QiniuImgUrl+images[(index + 1) % images.length]}
                            prevSrc={QiniuImgUrl+images[(index + images.length -1) % images.length]}
                            onCloseRequest={() => this.setState({ isOpen: false })}
                            onMovePrevRequest={() => this.setState({
                                index: (index + images.length - 1) % images.src.length,
                            })}
                            onMoveNextRequest={() => this.setState({
                                index: (index + 1) % images.length,
                            })}
                        />
                    }
                </div>
            </div>
        )
    }

}
